<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="绑定银行卡" left-arrow fixed @click-left="onClickLeft" />
        <div style="padding-bottom: 1.2rem;">
            <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
                <div class="team_list">
                    <div v-for="(item, index) in fansList" :key="index" class="card_item" @click="handleBindBankAccount(item.id)">
                        <!-- <div class="card_info"> -->
                        <div class="card_name"><div>{{ item.bank_name }}</div> <span v-if="item.default_flag">默认</span> <p @click.stop="handleBindBank(item.id)">编辑</p></div>
                        <div  class="card_img" @click.stop="handleBindBankDelete(item.id)">
                            <img src="../../../images/close-circle.png" alt="" >
                        </div>
                        <div class="card_num">
                            <div class="card_name">{{ item.name }}</div>
                            <div class="card_no">{{ item.bank_no }}</div>
                        </div>
                        <div class="card_default">
                            <img v-if="item.default_flag" src="../../../images/xuanzhong.png" alt="">
                            <img  @click.stop="handleStatus(item.id)" v-else src="../../../images/weixuanzhong.png" alt="">
                            默认
                        </div>
                    </div>
                    <!-- </div> -->
                </div>
            <!-- </van-list> -->
        </div>
        <div class="btns">
            <div @click="handleBindBank(0)">新增银行卡</div>
        </div>
    </div>
</template>
<script>
import { BANK_CARD_LIST ,BANK_CARD_DEFAULT ,BANK_CARD_DELETE} from "@/api/mine";
export default {
    data() {
        return {
            finished: false,
            loading: false,
            page: 1,
            pageSize: 20,
            fansList: [],
            inviter_show: "",
            total_count: 0,
            show: false
        };
    },
    mounted() {
        window.scrollTo(0, 0)
        this.onLoad()
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onLoad() {
            // let params = {};
            // params["page_num"] = this.page;
            // params["page_size"] = this.pageSize;
            // params['status'] = this.active;
            this.$http.get(BANK_CARD_LIST).then((res) => {
                this.fansList = res.data.list;
                // this.total_count = res.data.pages.total_count;
                // if (list && list.length) {
                //     // this.page++;
                //     this.fansList =list;

                //     // 加载状态结束
                //     this.loading = false;
                //     if (list.length < this.pageSize) {
                //         this.finished = true;
                //     }
                // } else {
                //     this.finished = true;
                // }
            });
        },
        handleBindBank(id) {
            this.$router.push({ name: 'bindCard' ,query:{id:id}})
        },
        async handleBindBankAccount(id){
           this.handleStatus(id,1)
        },
        //默认
        handleStatus(id,msg){
            this.$http.post(BANK_CARD_DEFAULT+id).then((res) => {
                    // this.page=1
                    // this.pageSize=20
                    this.fansList=[]
                    this.onLoad()
                    if(msg==1){
                        this.$router.push({ name: 'withdrawal' })
                    }
                })
        },
        handleBindBankDelete(id){
            this.$dialog.confirm({
                // title: '提示',
                message: '确定要删除该银行卡吗？',
                confirmButtonColor:'#1261E2'
            }).then(() => {
                // on confirm
                this.$http.delete(BANK_CARD_DELETE+id).then((res) => {
                    this.page=1
                    this.pageSize=20
                    this.fansList=[]
                    this.onLoad()
                })
            }).catch(() => {
                // on cancel
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #f5f5f5;
    overflow: hidden;
    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.team_list {
    width: 92%;
    margin: 0 auto;
    margin-top: 0.2rem;
    // background: #fff;

    .card_item {
        width: 100%;
        height: 2.3rem;
        background: url("../../../images/card.png") no-repeat center;
        border-radius: .12rem;
        background-size: cover;
        margin-bottom: .2rem;
        color: #fff;
        padding: .34rem .4rem;
        box-sizing: border-box;
        position: relative;

        .card_img {
            width: 1rem;
            height: 2rem;
            position: absolute;
            right: -.4rem;
            top: .24rem;
            img{
                width: .4rem;
                height: .4rem;
            }
        }

        .card_name {
            font-weight: 500;
            font-size: .32rem;
            display: flex;
            align-items: center;
            div{
                max-width: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            span {
                border-radius: .3rem;
                border: 1px solid #FFFFFF;
                font-weight: 400;
                font-size: .24rem;
                color: #FFFFFF;
                padding: .04rem .2rem;
                margin-left: .2rem;
            }
            p{
                font-size: .24rem;
                margin-left: .2rem;
                border-radius: .1rem;
                padding: .04rem .2rem;
                border: 1px solid #FFFFFF;
            }
        }

        .card_num {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: .16rem;

            .card_name {
                width: 28%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 400;
                font-size: .28rem;
                color: #FFFFFF;
            }

            .card_no {
                width: 70%;
                font-weight: 500;
                font-size: .4rem;
                color: #FFFFFF;
                text-align: right;
            }
        }

        .card_default {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: .28rem;
            color: #FFFFFF;
            margin-top: .1rem;

            img {
                width: .28rem;
                height: .28rem;
                margin-right: .1rem;
            }
        }
    }
}

.btns {
    width: 100%;
    background-color: #f5f5f5;
    height: 1.1rem;
    position: fixed;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-size: .32rem;
    padding-top: .1rem;
    padding-bottom: 1rem;
    // box-sizing: border-box;

    div {
        width: 80%;
        margin: 0 auto;
        background: linear-gradient(270deg, #1261E2 0%, #4A89EC 100%);
        border-radius: .44rem;
        padding: .2rem 0;
    }
}
</style>